<template>
  <div class="pt-20 pb-20 pl-20 pr-20">
    <el-upload
      action="/solrj/demo/upload"
      :on-success="uploadSuccess"
      :http-request="httpRequest"
    >
      <el-button type="primary"> Click to upload </el-button>
    </el-upload>

    <el-input
      v-model="searchData.keyword"
      placeholder="Please input"
      class="mt-20"
    >
      <template #append>
        <LeeButton @click="handleSearch"> Search </LeeButton>
      </template>
    </el-input>

    <div class="mt-20">
      {{ data.response }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { fetchUpload, fetchQuery } from '@/api/public';
import { reactive } from 'vue';
const searchData = reactive({
  keyword: '',
});
const data = reactive({
  response: null,
});
/**
 * @description 上传成功钩子
 */
function uploadSuccess(e) {
  // console.log("成功");
  console.log(e);

  // ElMessage.success("上传成功");
}

/**
 * @description 自定义上传事件
 */
async function httpRequest(param) {
  const formData = new FormData();
  formData.append('file', param.file);
  for (const key in this.dataFrom) {
    if (Object.hasOwnProperty.call(this.dataFrom, key)) {
      formData.append(key, this.dataFrom[key]);
    }
  }
  const response = await fetchUpload(formData);
  console.log(response);
}

/**
 * @description 搜索
 */
async function handleSearch() {
  data.response = await fetchQuery(searchData);
}
</script>

<style lang="scss" scoped>
</style>
